<template>
  <div>
    <div class="music-list">
      <p>热门歌单</p>
      <div class="music-list-detail">
        <ul v-for="(line,index) in getHot" :key="'line'+index">
          <li v-for="song in line" :key="song.type">
            <SongIcon :song="song"></SongIcon>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import SongIcon from './SongIcon.vue'
  import {hotSong} from '../api/song'
  import {chunk, get} from 'lodash'

  export default {
    name: 'MusicList',
    components: {
      SongIcon,
    },

    data() {
      return {
        song: []
      }
    },
    computed: {
      getHot: function () {
        // console.log(this.song)
        return chunk(this.song, 3)
      }
    },
    mounted: function () {
      this.getHotMusic()
    },
    methods: {
      async getHotMusic() {
        let data = await hotSong()
        if (get(data, 'data.data')) {
          this.song = get(data, 'data.data').slice(0,6)
        }
      }
    }
  }
</script>
<style>

  .music-list p {
    margin-left: 2%;
    font-weight: bold;
    /*font-size: 14px;*/
  }

  .music-list-detail ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    justify-content: space-around;
  }


</style>
